<template>
  <div>
    <h1 style="font-size: 48px">售后服务</h1>
    <hr>
    <div style="display: flex;align-items: center;flex-direction: column;">
    <ul>
      <li v-for="service in services" :key="service.id">
        <h2 style="font-size: 36px">{{ service.title }}</h2>
        <p style="font-size: 28px">{{ service.description }}</p>
        <el-popover
            placement="top-start"
            title="宠物购买协议"
            width="1000"
            trigger="hover"
            content="
                    本协议是由宠物主人（以下简称甲方）和宠物保姆（以下简称乙方）之间就宠物保养事宜所达成的协议。双方须遵守以下条款：
                    1.保养期限：
                    甲方与乙方就宠物保养的具体期限达成一致，并在本协议中明确注明起止日期。<br>
                    2.宠物信息：
                    甲方应提供宠物的详细信息，包括但不限于宠物种类、年龄、性别、健康状况、喂食习惯、生活习惯等。乙方应在接受保养任务前充分了解宠物的相关信息，并确认是否能够提供适当的照顾。
                    3.保养内容：
                    乙方将根据甲方的需求和宠物的特殊情况进行保养，包括但不限于喂食、洗漱、定期散步、清洁宠物用具、照顾宠物卫生等。
                    4.饮食要求：
                    甲方应提供宠物的食品和喂食指南，包括每日食量、喂食次数、特殊饮食要求等。乙方应按照指南正确喂食宠物，确保其获得适当的营养。
                    5.医疗照顾：
                    如宠物需要定期服药、注射或其他医疗照顾，甲方应提供详细说明，并确保乙方有足够的能力和技能来提供必要的医疗照顾。
                    6.宠物安全：
                    乙方应尽最大努力确保宠物的安全。如宠物在保养期间发生任何意外伤害或疾病，乙方应立即通知甲方，并采取适当的紧急措施，如就医等。
                    7.费用和支付：
                    甲方和乙方应就保养期限和费用达成一致，并在本协议中明确注明。费用可根据宠物的种类、保养内容和保养期限等因素而有所调整。
                    8.保密条款：
                    双方应对在合作过程中获得的对方信息予以保密，并不得将相关信息泄露给第三方，除非经过双方书面同意或法律要求。
                    9.终止协议：
                    协议期限届满后，协议自动终止。如双方有任何一方违反了本协议规定的条款，对方有权提前终止协议。
                    10.争议解决：
                    如双方就本协议的条款发生争议，应首先通过友好协商解决。如协商不成，应提交至有管辖权的法院解决。">
          <el-button slot="reference">协议说明</el-button>
        </el-popover>
        <button style="font-size: 20px; border: 1px solid #000; border-radius: 4px; position: relative; left: 20px; top: 2px; background-color: rgba(174,107,45,1)" @click="openForm(service.id)">申请</button>
      </li>
    </ul>
    </div>
    <br>
    <div v-if="selectedService !== null" :class="{ open: selectedService !== null }">
      <hr><br><br>
      <h2>申请{{ selectedService.title }}</h2>
      <form @submit.prevent="submitForm">
        <label for="reason">订单号：</label>
        <input style="width: 300px" type="text" id="reason" v-model="form.reason" required>
        <div>
          <label for="reason1">申请原因：</label>
          <input style="width: 300px;position: relative;right: 9px;" type="text" id="reason1" v-model="form.reason"
                 required>
        </div>
        <br>
        <button type="submit" style="position: relative;right: 20px;border: 1px solid #000; border-radius: 4px;background-color: rgba(174,107,45,1)">提交申请</button>
        <button @click="closeForm" style="position: relative;left: 20px;border: 1px solid #000; border-radius: 4px;background-color: rgba(174,107,45,1)">取消</button>
        <br><br><br><br>
      </form>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      services: [
        {
          id: 1,
          title: "退货",
          description: "购买商品后7天内，可申请无理由退货。我们将为您提供退款或换货服务。",
          description2: "甲方(购货方): 乙方(销货方):经甲乙双方共同协商，在平等、公平、公正、自愿的原则下，达成如下退货事项\n" +
              "第一条货物描述:\n" +
              "货物名称\n" +
              "规格型号单位数量单价金额税率税额\n" +
              "价税合计:(大写)(小写)\n" +
              "第二条退货原因:乙方延迟交货，且材料不符合订单，未能保证甲方顺利使用。\n" +
              "第三条双方责任:(一)方责任:按约定退还货物。(二)方责任退还已付的货款并承担退货产生的一切费用。如有未尽事宜，由双方另行商定。\n" +
              "第四条协议生效、中止与结束:(一)本协议一式二份，甲乙双方各执一份，需经双方签字认可后有效，生效日期以甲乙双方中最后一方签字或盖章)的日期为准;(二)以货款两之日起，结束本协议关系\n" +
              "第五条纠纷解决方式:因执行本协议发生的或与本协议有关的-切争议，甲乙双方应通过友好协商解决，如双方协商仍不能达成一致意见时，则提交仲裁机构。\n" +
              "第六条:双方单位所提供的退货协议和附送资料内容真实、完整准确，并对此承相应法律责任",

        },
        {
          id: 2,
          title: "换货",
          description: "购买商品后15天内，可申请换货。我们将为您提供同款不同色或不同型号的商品。",
          description2: "经甲乙双方共同协商，在平等、公平、公正、自愿的原则下，达成以下换货事项:第一条 换货受理范围\n" +
              "1.申请退换之商品必须是拥有甲方开具的退货本人抬头之原始销货单者。\n" +
              "2.申请退换之商品必须是新品，即乙方第一次所进之品项，且自乙方进货之日起时间不超过3个月。\n" +
              "3.申请退换之商品必须是原包装未开启、无污损，不影响第二次销售之单品。\n" +
              "4.申请退换之商品必须是属于正品而非赠品或折扣券商品。\n" +
              "第二条 申请退换货需检附之文件1.退换货申请表，申请表中需注明产品型号、色号、单价、数量、购货日期等信息。2.原始购货单原件或复印件。\n" +
              "第三条 申请退换货流程\n" +
              "1.退货当事人以书面或电话形式提前向甲方相关业务人员提出申请，\n" +
              "2.甲方同意换货后将换货单交由送货人员，在乙方下次补货时将所退换之产品带回甲方公司仓库。\n" +
              "第四条 退换货产品计价方式\n" +
              "1.乙方申请退回之商品将依该商品原始进货价格进行费用抵扣，并向甲方支付 20%的退货损失费，如有赠品或其他促销让利获益时，应从费用抵扣中扣除。\n" +
              "2.若非正常补单时由甲方公司取回退货之商品所产生的运费及其他费用必须由乙方自行承担。\n" +
              "第五条 协议生效、终止与结束\n" +
              "1.本协议一式二份，甲乙双方各执一份，经双方签字后生效\n" +
              "2.本协议有效期一年。\n" +
              "第六条 纠纷解决方式\n" +
              "因执行本协议发生的或与本协议有关的一切争议，甲乙双方应通过友好协商解决，如双方协商仍不能达成一致意见时，则提交仲裁机构",
        },
        {
          id: 3,
          title: "保养",
          description: "购买商品后30天内，可申请保养。我们将提供保修或保养服务。",
          description2: "本协议是由宠物主人（以下简称\"甲方\"）和宠物保姆（以下简称\"乙方\"）之间就宠物保养事宜所达成的协议。双方须遵守以下条款：\n" +
              "\n" +
              "1.保养期限：\n" +
              "甲方与乙方就宠物保养的具体期限达成一致，并在本协议中明确注明起止日期。\n" +
              "\n" +
              "2.宠物信息：\n" +
              "甲方应提供宠物的详细信息，包括但不限于宠物种类、年龄、性别、健康状况、喂食习惯、生活习惯等。乙方应在接受保养任务前充分了解宠物的相关信息，并确认是否能够提供适当的照顾。\n" +
              "\n" +
              "3.保养内容：\n" +
              "乙方将根据甲方的需求和宠物的特殊情况进行保养，包括但不限于喂食、洗漱、定期散步、清洁宠物用具、照顾宠物卫生等。\n" +
              "\n" +
              "4.饮食要求：\n" +
              "甲方应提供宠物的食品和喂食指南，包括每日食量、喂食次数、特殊饮食要求等。乙方应按照指南正确喂食宠物，确保其获得适当的营养。\n" +
              "\n" +
              "5.医疗照顾：\n" +
              "如宠物需要定期服药、注射或其他医疗照顾，甲方应提供详细说明，并确保乙方有足够的能力和技能来提供必要的医疗照顾。\n" +
              "\n" +
              "6.宠物安全：\n" +
              "乙方应尽最大努力确保宠物的安全。如宠物在保养期间发生任何意外伤害或疾病，乙方应立即通知甲方，并采取适当的紧急措施，如就医等。\n" +
              "\n" +
              "7.费用和支付：\n" +
              "甲方和乙方应就保养期限和费用达成一致，并在本协议中明确注明。费用可根据宠物的种类、保养内容和保养期限等因素而有所调整。\n" +
              "\n" +
              "8.保密条款：\n" +
              "双方应对在合作过程中获得的对方信息予以保密，并不得将相关信息泄露给第三方，除非经过双方书面同意或法律要求。\n" +
              "\n" +
              "9.终止协议：\n" +
              "协议期限届满后，协议自动终止。如双方有任何一方违反了本协议规定的条款，对方有权提前终止协议。\n" +
              "\n" +
              "10.争议解决：\n" +
              "如双方就本协议的条款发生争议，应首先通过友好协商解决。如协商不成，应提交至有管辖权的法院解决。",
        },
      ],
      selectedService: null,
      form: {
        reason: "",
        reason1: "",
      },
    };
  },
  methods: {
    openForm(serviceId) {
      this.selectedService = this.services.find(service => service.id === serviceId);
    },
    submitForm() {
      // 处理表单提交逻辑
      console.log("申请已提交");
      this.closeForm();
    },
    closeForm() {
      this.selectedService = null;
      this.form.reason = "";
      this.form.reason1 = "";
    },
  },
};
</script>

<style>


h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 0px;
}

h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

p {
  color: #666;
  margin-bottom: 10px;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

form {
  margin-top: 20px;
}

.open {
  max-height: 500px; /* 表单展开时的最大高度 */
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
}
</style>